<template>

  <div id="app-hw-bluetooth">
    <div class="one-block-1">
      <span>
        1. 打印机设备
      </span>
    </div>
    <div class="one-block-2">
      <el-button type="primary" @click="getPrinter()"> 获取打印机列表 </el-button>
    </div>
    <div class="one-block-2" >
      <el-table :data="printerInfoList.domain" stripe style="width: 100%">
        <el-table-column prop="name" label="名称" width="180" />
        <el-table-column prop="displayName" label="打印机实际名称" width="180" />
        <el-table-column prop="isDefault" label="是否为默认" />
        <el-table-column prop="description" label="描述" />
        <el-table-column prop="status" width="60" label="状态" />
      </el-table>
    </div>
    <div class="one-block-1">
      <span>
        2. 打印内容
      </span>
    </div>
    <div class="one-block-2">
      <el-button @click="doPrint(0)"> 打印一个页面 </el-button>
    </div>
  </div>
</template>


<script lang="ts" setup>
import {ipcApiRoute} from '@/api/main';
import {ipc} from '@/utils/ipcRenderer';
import {toRaw, onMounted, reactive, computed} from 'vue';
import {ElMessage} from "element-plus";

let printerInfoList = reactive({
  defaultDeviceName : '',
  domain:[]
} )

const views = reactive({views: [
  {
    type: 'html',
    content: '/public/html/view_example.html'
  },
]})

interface PrinterInfo {
  /**
   * a longer description of the printer's type.
   */
  description: string;
  /**
   * the name of the printer as shown in Print Preview.
   */
  displayName: string;
  /**
   * whether or not a given printer is set as the default printer on the OS.
   */
  isDefault: boolean;
  /**
   * the name of the printer as understood by the OS.
   */
  name: string;
  /**
   * the current status of the printer.
   */
  status: number;
}


onMounted(()=>{
  init()
})

function init () {
  // 避免重复监听，或者将 on 功能写到一个统一的地方，只加载一次
  console.log('初始化')
  ipc.removeAllListeners(ipcApiRoute.printStatus);
  ipc.on(ipcApiRoute.printStatus, (event, result) => {
    console.log('result', result);
    ElMessage.success('打印中...');
  })
}


function getPrinter () {
  ipc.invoke(ipcApiRoute.getPrinterList, {}).then(res => {
    console.log(res)
    printerInfoList.domain = res;

  })
}



function doPrint (index) {
  console.log('defaultDeviceName:', printerInfoList.defaultDeviceName)
  const params = {
    view: toRaw(views[index]),
    deviceName: printerInfoList.defaultDeviceName
  };
  ipc.send(ipcApiRoute.print, params)
}
function defaultDevice (item) {
  let desc = "";
  if (item.isDefault) {
    desc = "- 默认";
    printerInfoList.defaultDeviceName = item.name;
  }
  return desc;
}
</script>

<style lang="less" scoped>
  .one-block-2{
    padding-top: 20px;
  }
  .one-block-1{
    padding-top: 20px;
  }
</style>
